<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>前后端分离初体验</title>
	<script src="vue_dev.js"></script>
	<script src="axios.min.js"></script>
</head>

<body>
	<div id="app">
		<h1>菜单</h1>
		<section v-if="errored">
			<p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
		</section>
		<section v-else>
			<div v-if="loading">正在读取数据...</div>
			<div v-else >

				<table>
					<tr>
						<th>菜名</th>
						<th>辣度</th>
						<th>忌口</th>
						<th>食材</th>
						<th>烹饪时间</th>
						<th>菜系</th>
						<th>重量</th>
						<th>尺码</th>
						<th>类型</th>
						<th>荤素</th>
						<th>单价</th>
					</tr>
					<tr v-for="menu in info">
						<td><a v-bind:href="'../phprestart/food.php?m_name='+menu.menu_name" >{{ menu.menu_name }}</a></td>
						<td></td>
						<td>{{ menu.menu_avoid }}</td>
						<td>{{ menu.menu_food_materia }}</td>
						<td>{{ menu.menu_cook_time }}</td>
						<td>{{ menu.menu_special }}</td>
						<td>{{ menu.menu_weight }}</td>
						<td>{{ menu.menu_size }}</td>
						<td>{{ menu.menu_cook_type }}</td>
						<td>{{ menu.menu_veg_meat }}</td>
						<td>{{ menu.menu_unit_price }}</td>
						<td><a v-bind:href="'../phprestart/food.php?m_name='+menu.menu_name" ">编辑</a></td>
						<td><a v-bind:href="'Menu_del.php?m_id='+menu.menu_id" ">删除</a></td>
					</tr>

				</table>
			</div>
		</section>
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data() {
				return {
					info: null,
					loading: true,
					errored: false
				}
			},
			filters: {
				currencydecimal(value) {
					return value.toFixed(2)
				}
			},
			mounted() {
				axios
				.get('http://127.0.0.1/FrontEnd/MenuJson.php')
				.then(response => (this.info = response.data))
				.catch(error => {
					console.log(error)
					this.errored = true
				})
				.finally(() => this.loading = false)
			}
		})
	</script>
</body>

</html>